<template>
  <div class="nnn-contain">
    <el-container>
      <el-header style="height: 100%">
        <el-card class="page-tools">
          <el-form :inline="true" size="small">
            <!-- 第一行开始 -->
            <el-row align="middle" :gutter="10">
              <!-- 素材名称开始 -->
              <el-col :span="6">
                <el-form-item label="素材名称">
                  <el-input
                    v-model="source"
                    size="small"
                    placeholder="输入要搜索的素材名称"
                  />
                </el-form-item>
              </el-col>
              <!-- 素材名称结束 -->

              <!-- 上传者id开始 -->
              <el-col :span="6">
                <el-form-item label="上传者id">
                  <el-input
                    v-model="loader"
                    size="small"
                    placeholder="输入要搜索的素材名称"
                  />
                </el-form-item>
              </el-col>
              <!-- 上传者id结束 -->
              <el-col :span="12">
                <el-form-item label="素材类别">
                  <el-select
                    v-model="value"
                    size="small"
                    placeholder="---请选择---"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>

                  <el-select
                    v-model="value"
                    style="padding-left: 15px"
                    size="small"
                    placeholder="--- 请选择---"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第一行结束 -->
          </el-form>

          <!-- 第二行开始 -->
          <el-row>
            <el-col :offset="15">
              <el-button
                size="small"
                type="primary"
                @click="query"
              >查询</el-button>
              <el-button
                style="margin-left: 30px"
                size="small"
                type="primary"
                @click="reset"
              >重置</el-button>
            </el-col>
          </el-row>
          <!-- 第二行结束 -->
        </el-card>
      </el-header>
      <el-footer>
        <el-card>
          <el-table :data="aab ? tableDate : tableData" style="width: 100%">
            <el-table-column prop="materialName" label="素材名称" width="" />

            <el-table-column label="素材图">
              <template slot-scope="scope">
                <el-image :key="scope.row.id" :src="scope.row.materialMap" :preview-src-list="[scope.row.materialMap]" />
              </template>
            </el-table-column>
            <el-table-column prop="materialCategory" label="素材类别" width="" />

            <el-table-column prop="price" label="价格" />
            <el-table-column prop="uploaderId" label="上传者ID" />
            <el-table-column prop="telephone" label="联系电话" width="120" />
            <el-table-column
              prop="submit"
              label="提交审核日期"
              width="120"
            />
            <el-table-column prop="auditStatus" label="审核状态" />
            <el-table-column prop="auditDate" label="审核日期" />
            <el-table-column prop="auditComments" label="审核备注" />
            <el-table-column label="操作">
              <template>
                <el-button
                  v-if="btnShow"
                  type="text"
                  size="small"
                  @click="getDetails"
                >审核素材
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-footer>
    </el-container>
  </div>

</template>
<script>
import { getMaterialList, getMaterialCategory } from '@/api/library'
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      options: [
        {
          value: '选项1',
          label: '1'
        },
        {
          value: '选项2',
          label: '2'
        }
      ],
      tableData: [],
      tableDate: [],
      aab: false,
      value: '',
      btnShow: false,
      source: '',
      loader: ''
    }
  },
  computed: {},
  watch: {},
  created() { this.getMaterialList() },
  mounted() {},
  methods: {
    async getMaterialList() {
      this.tableData = await getMaterialList()
    },
    async getMaterialCategory() {
      this.tableDate = await getMaterialCategory(this.value)
    },
    query() {
      if (this.source !== '' || this.loader !== '') {
        const a = this.tableData.some((item) => {
          if (item.materialName === this.source || item.uploaderId === this.loader) {
            this.aab = true
            this.tableDate = []
            return this.tableDate.push(item)
          }
        })
        if (!a) {
          this.$message('无数据')
        }
      } else if (this.value !== '') {
        this.getMaterialCategory()
        console.log(this.tableDate)
        this.aab = true
      }
    },
    reset() {
      this.aab = false
      this.source = ''
      this.loader = ''
      this.value = ''
    }
  }
}
</script>

<style scoped lang="less"></style>
